import React from 'react';
import TimeForm from './TimeForm';
import Timer from "./Timer";
class EditableTimer extends React.Component{
    state ={
        editFormOpen: false
    }
    handleSubmit=(timer)=>{
       this.props.onFormSubmit(timer);
       this.handleCancle();
    }
    handleCancle=()=>{
        this.setState({
            editFormOpen: false
        })
    }
    handleEdit=(timer)=>{
        console.log("handleEdit------",timer)
        this.props.onFormSubmit(timer)
        this.setState({
            editFormOpen: true
        })
    }
    render() {
        console.log("EditableTimer-----",this.state.editFormOpen)
        if (this.state.editFormOpen){
            return(
                <TimeForm
                    id={this.props.id}
                    title={this.props.title}
                    project={this.props.project}
                    onFormSubmit={this.handleSubmit}
                    onFromCancle={this.handleCancle}
                ></TimeForm>
            )
        }else{
            return(
                <Timer
                    id={this.props.id}
                    title={this.props.title}
                    project={this.props.project}
                    elapsed={this.props.elapsed}
                    runningSince={this.props.runningSince}
                    onEditClick={this.handleEdit}
                    onTrashClick={this.props.onTrashClick}
                    onStartClick={this.props.onStartClick}
                    onStopClick={this.props.onStopClick}
                ></Timer>
            )
        }

    }
}

export default EditableTimer;